<!--
 * @Date: 2025-04-02 21:38:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-19 13:12:53
 * @FilePath: /admin/vue/src/layouts/admin.vue
-->
<script setup lang="ts">
import { FullScreen, ThemeMode, UserDropdown, HeaderBreadcrumb, SideMenu } from './components'
import { RouterLink } from 'vue-router'

const collapsed = ref(false)
const collapsedUpdate = (val: boolean) => (collapsed.value = val)

const theme = useThemeStore()
</script>

<template>
  <n-layout class="h-screen w-screen">
    <n-layout has-sider>
      <n-layout-sider
        show-trigger
        class="shadow-md z-11"
        collapse-mode="width"
        :collapsed="collapsed"
        :collapsed-width="theme.sider.collapsedWidth"
        :on-update:collapsed="collapsedUpdate"
        :width="240"
        :native-scrollbar="false"
        style="height: 100vh"
      >
        <n-layout-header class="h-14 flex items-center">
          <router-link
            :to="{ name: 'admin.home' }"
            class="flex items-center justify-center w-full nowrap-hidden"
          >
            <icon-github class="text-3xl text-primary transition-all duration-300 ease-in-out" />
            <h2
              v-show="!collapsed"
              class="pl-2 text-base font-bold text-primary transition-all duration-300 ease-in-out opacity-90 whitespace-nowrap"
            >
              {{ $t('system.title') }}
            </h2>
          </router-link>
        </n-layout-header>

        <SideMenu :collapsed="collapsed" :collapsed-width="theme.sider.collapsedWidth" />
      </n-layout-sider>
      <n-layout embedded>
        <n-layout-header class="flex justify-between h-14 shadow-sm">
          <section class="flex items-center font-bold pl-3 text-2xl">
            <HeaderBreadcrumb />
          </section>
          <section class="flex items-center">
            <FullScreen />
            <ThemeMode />
            <UserDropdown />
          </section>
        </n-layout-header>
        <n-layout-content
          embedded
          class="m-4"
          content-style="height: calc(100vh - 88px);"
          :native-scrollbar="false"
        >
          <router-view></router-view>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-layout>
</template>

<style lang="scss" scoped></style>
